<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>人才市场列表</title>
    <script src="util.js"></script>
    <script src="req.js"></script>
    <script src="flexible.min.js"></script>
    <style>
        * {
            background-color: #eee;
            font-size: 20px;
        }

        table {
            background-color: #fff;
            width: 100%;
            text-align: center;
        }

        img {
            width: 20px;
        }
    </style>
</head>

<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>类型 <img id="img1" onclick="fn_data(1)" src="img/square_down.png" alt=""> </th>
                    <th>薪资 <img id="img2" onclick="fn_data(0)" src="img/square_down.png" alt=""></th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        var xdata;
        var cont = 0;
        var flag1 = true;
        var flag2 = true;
        function html_data(el) {
            console.log(el);

            var data = "";
            el.forEach(e => {
                data += `<tr>
                    <td>${e.peopleName}</td>
                    <td>${e.tname}</td>
                    <td>${e.gold}</td>
                </tr>`;
            });
            $('tbody').html(data)
        }
        $(function () {
            JQ('http://192.168.1.101:8085/dataInterface/People/getAll').then(e => {
                console.log(e.data);
                xdata = e.data
                status(xdata);
            })
        })
        function status(type) {
            type.forEach((e1, index) => {

                switch (e1.status) {
                    case 0:
                        xdata[index].tname = '工程师'
                        break
                    case 1:
                        xdata[index].tname = '工人'
                        break
                    case 2:
                        xdata[index].tname = '技术人员'
                        break
                    case 3:
                        xdata[index].tname = '检测人员'
                        break
                }
                cont++;
                if (cont == xdata.length) {
                    html_data(xdata);
                }
            });
        }
        function fn_data(id) {
            $('#img1').attr('src', 'img/square_down.png')
            $('#img2').attr('src', 'img/square_down.png')
            if (id) {
                if (flag1) {
                    $('#img1').attr('src', 'img/square_up.png')
                    xdata.sort(function (a, b) {
                        return a.tname.localeCompare(b.tname)
                    })
                    html_data(xdata)
                    flag1 = false;
                } else {
                    $('#img1').attr('src', 'img/square_down.png')
                    xdata.sort(function (a, b) {
                        return b.tname.localeCompare(a.tname)
                    })
                    html_data(xdata)
                    flag1 = true;
                }

            } else {
                if (flag2) {
                    $('#img2').attr('src', 'img/square_up.png')
                    xdata.sort(function (a, b) {
                        return a.gold-b.gold
                    })
                    html_data(xdata)
                    flag2 = false;
                } else {
                    $('#img1').attr('src', 'img/square_down.png')
                    xdata.sort(function (a, b) {
                        return b.gold-a.gold
                    })
                    html_data(xdata)
                    flag2 = true;
                }
            }
        }
    </script>
</body>

</html>